<template>
  <div>
<!--    <el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">-->
<!--      <el-tab-pane label="常用工具">常用工具</el-tab-pane>-->
<!--      <el-tab-pane label="技术社区">技术社区</el-tab-pane>-->
<!--      <el-tab-pane label="限时专区">限时专区</el-tab-pane>-->
<!--      <el-tab-pane label="摸鱼专区">摸鱼专区</el-tab-pane>-->
<!--    </el-tabs>-->
    <myComponent
        style="height: 100px;width: 100px"
        ref="myComponent"
        @onChange="onChange"
        :tabItemEls="tableLists">
      <div>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
        <p>1234567890</p><br>
      </div>
      <div>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
        <p>xxxxxxx</p><br>
      </div>
    </myComponent>

  </div>
</template>

<script>
import {ref} from 'vue'
import myComponent from './MyComponent.vue'

export default {
  name: "OtherProjects",
  components:{
    myComponent
  },
  data() {
    return {
      tabPosition: ref('left'),
      tableList: [
        {
          title: '111',
          note: '111',
          href: '111'
        },
      ],
      tableLists: [
        '123','456'
      ]
    }
  },
  mounted() {
    //直接设置显示那个选项
    this.$refs.myComponent.setActiveEl(2);
  },
  methods: {
    onChange(){

    }
  }
  // destroyed(){
  //   window.removeEventListener('scroll', this.handleScroll);
  // }
}
</script>

<style scoped>

</style>
